<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/logcat.css">
    <title>Document</title>
</head>

<body>
<canvas id="canvas" style="border: 1px solid red;"></canvas>

<script>

    var BLANK_IMG =
        ''
    var canvas = document.getElementById('canvas'),
        g = canvas.getContext('2d')
    var ws = new WebSocket("ws://172.17.2.23:7912/minicap")
    ws.binaryType = 'blob'
    ws.onclose = function () {
        console.log('onclose', arguments)
        var warn = document.createElement("div")
        warn.innerText = "Websocket closed, Refresh to reload."
        warn.style.color = "red"
        warn.style.fontSize = "20px"
        document.body.appendChild(warn);
    }
    ws.onerror = function () {
        console.log('onerror', arguments)
    }
    ws.onmessage = function (message) {
        if (message.data instanceof Blob) {
            var blob = new Blob([message.data], {
                type: 'image/jpeg'
            })
            var URL = window.URL || window.webkitURL
            var img = new Image()
            img.onload = function () {
                // console.log(img.width, img.height)
                canvas.width = img.width
                canvas.height = img.height
                g.drawImage(img, 0, 0)
                img.onload = null
                img.src = BLANK_IMG
                img = null
                u = null
                blob = null
            }
            var u = URL.createObjectURL(blob)
            img.src = u
        } else {
            // console.log(message.data)
        }
    }
    ws.onopen = function () {
        console.log('onopen', arguments)
        ws.send('1920x1080/0')
    }
</script>
</body>
<script>
    window.onload = function(){
        var mobile_w=1080;
        var mobile_h=2160;
        var element = document.getElementById('canvas');
        var mouseDown=false
        var mouseMove=false


        //按下鼠标
        function mouseDownListener(event){
            mouseDown=true
            var e = event;

            if (window.bili_x == undefined){
                window.bili_x=mobile_w/element.width;
                window.bili_y=mobile_h/element.height;
                console.log("比例尺  "+bili_x+"---"+bili_y);
            }
            //first point
            window.downpoint_x = parseInt((e.clientX - this.offsetLeft) * bili_x);
            window.downpoint_y = parseInt((e.clientY - this.offsetTop) * bili_y);

        }

        function mouseMoveListener(event){
            if (mouseDown){
                mouseMove=true;
            }
        }
        function mouseUpListener(event){
            var e = event;
            var uppoint_x = parseInt((e.clientX - this.offsetLeft) * bili_x);
            var uppoint_y = parseInt((e.clientY - this.offsetTop) * bili_y);
            mouseDown=false
            //判断是否是move
            if (!mouseMove&&(uppoint_x==downpoint_x)&&(uppoint_y==downpoint_y)){
                console.log("mouseDownListener")
                var commond="input tap "+downpoint_x+" "+downpoint_y
                console.log(commond)
                var url="http://172.17.2.228:8000/devices/touch/"+commond
                // console.log(url)
                //upload
                function prase(response){
                    console.log
                }
                request().get(url=url,null,callback=prase)


            }else{
                console.log("mouseMoveListener")
                mouseMove=false

                commond="input swipe "+window.downpoint_x+" "+window.downpoint_y+" "+uppoint_x+" "+uppoint_y+" 100"
                console.log(commond)
                var url="http://172.17.2.228:8000/devices/touch/"+commond
                // console.log(url)
                //upload
                function prase(response){
                    console.log
                }
                request().get(url=url,null,callback=prase)

            }
        }
        function request(){
            var obj={}
            var xhr=new XMLHttpRequest();
            obj.get=(url,headers,callback)=>{
                if (headers!=undefined&&headers!=null){
                    headers.forEach((k,v)=>{
                        xhr.setRequestHeader(k,v);
                    });
                }
                if (callback!=undefined){
                    xhr.onreadystatechange=(res)=>{
                        if(xhr.readyState==4){
                            if(xhr.state==200){
                                console.log(xhr.responseText)
                                callback(xhr.responseText)
                            }
                        }
                    }
                }
                xhr.open("GET",url,true)
                xhr.send(null);
            }
            return obj
        }

        element.addEventListener('mousedown', mouseDownListener);
        element.addEventListener('mousemove', mouseMoveListener);
        element.addEventListener('mouseup', mouseUpListener);

        // element.addEventListener('mousemove', mouseHoverListener);


    }
</script>

</html>